import defaultSettings from "@/settings";
import { ThemeEnum } from "@/enums/ThemeEnum";
// import { generateThemeColors, applyTheme, toggleDarkMode } from "@/utils/theme";
import { defineStore } from 'pinia'
import { useStorage } from '@vueuse/core';

export const useSettingsStore = defineStore("setting", () => {
  // 基本设置
  const settingsVisible = ref(false)
  // 标签
  const tagsView = useStorage("tagsView", defaultSettings.tagsView)
  // 侧边栏 Logo
  const sidebarLogo = useStorage("sidebarLogo", defaultSettings.sidebarLogo)
  // 固定头部
  const fixedHeader = useStorage("fixedHeader", defaultSettings.fixedHeader)
  // 布局
  const layout = useStorage("layout", defaultSettings.layout)
  // 水印
  const watermarkEnabled = useStorage(
    "watermarkEnabled",
    defaultSettings.watermarkEnabled
  )

  // 主题
  const themeColor = useStorage("themeColor", defaultSettings.themeColor);
  const theme = useStorage("theme", defaultSettings.theme);

  // 监听主题变化
  // watch(
  //   [theme, themeColor],
  //   ([newTheme, newThemeColor]) => {
  //     toggleDarkMode(newTheme === ThemeEnum.DARK);
  //     const colors = generateThemeColors(newThemeColor);
  //     applyTheme(colors);
  //   },
  //   { immediate: true }
  // );
  // 设置更改函数
  const settingsMap = {
    fixedHeader,
    tagsView,
    sidebarLogo,
    layout,
    watermarkEnabled,
  };

  function changeSetting({ key, value }) {
    const setting = settingsMap[key];
    if (setting) setting.value = value;
  }

  function changeTheme(val) {
    theme.value = val;
  }

  function changeThemeColor(color) {
    themeColor.value = color;
  }

  function changeLayout(val) {
    layout.value = val;
  }

  return {
    settingsVisible,
    tagsView,
    fixedHeader,
    sidebarLogo,
    layout,
    themeColor,
    theme,
    watermarkEnabled,
    changeSetting,
    changeTheme,
    changeThemeColor,
    changeLayout,
  };
});
